<template>
  <div>
    <div class="title">
      <span>全部服务商</span>
      <div>
        <el-button type="primary" @click="addservices()">新增服务商</el-button>
        <el-button icon="el-icon-refresh" @click="refresh"></el-button>
      </div>
    </div>
    <div class="container">
      <div class="screeningBox">
        <div class="leftBox">
          <!-- <div class="leftitem">
            <div class="block">
              <el-date-picker v-model="serviceinfo.stardate" type="datetime" placeholder="提交起始时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
              <el-date-picker v-model="serviceinfo.enddate" type="datetime" placeholder="提交结束时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </div>
          </div> -->
          <div class="leftitem">
            <div class="block">
              <el-input class="merchants1" v-model.trim="serviceinfo.head" placeholder="联系人" @keyup.enter.native="soso"></el-input>
              <el-input class="merchants1" v-model.trim="serviceinfo.phone" placeholder="联系人手机号" @keyup.enter.native="soso"></el-input>
            </div>
          </div>
          <!-- <div class="leftitem" v-if="rolesId == 1 || rolesId == 2 || rolesId == 8 || rolesId == 9">
            <el-form label-width="80px">
              <el-select class="servicename1" v-model="dimension"  placeholder="选择维度" @change="dimension_menu">
                <el-option keys="1" label="一级服务商" :value="2"></el-option>
                <el-option keys="2" label="二级服务商" :value="3"></el-option>
                <el-option keys="2" label="业态" :value="4"></el-option>
                <el-option keys="2" label="商户" :value="5"></el-option>
                <el-option keys="2" label="门店" :value="6"></el-option>
              </el-select>
            </el-form>
          </div> -->
        </div>
        <div class="rightBox">
          <div class="rightitem">
              <el-select class="merchants" v-model="serviceinfo.state" placeholder="服务商级别" v-if="rolesId !== 2">
                <el-option :key="1" label="一级服务商" :value="1"></el-option>
                <el-option :key="2" label="二级服务商" :value="2"></el-option>
              </el-select>
              <el-select class="merchants" v-model="serviceinfo.state" placeholder="请选择" v-if="rolesId == 2">
                <el-option keys="1" label="二级服务商" :value="2"></el-option>
              </el-select>
            <el-input class="merchants" v-model.trim="serviceinfo.agent" placeholder="服务商名称/编号" @keyup.enter.native="soso"></el-input>
            <el-autocomplete class="merchants" v-model.trim="tagname" :fetch-suggestions="querySearch_tag" :trigger-on-focus="false" @select="serviceid_tag" placeholder="标签名称"></el-autocomplete>
          </div>
          <div class="rightitem">
            <el-button icon="el-icon-search" type="primary" @click="soso" :disabled="isDisable">搜索</el-button>
            <el-button icon="el-icon-refresh" type="primary" @click="reset">重置</el-button>
          </div>
        </div>
      </div>
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="merchantarr"
          :loading="loading" 
          tooltip-effect="dark"
          style="width: 100%"
          stripe
          :header-cell-style="tableHeaderColor"
        >
           <el-table-column type="index" align="center" width='50' label="序号"></el-table-column>
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="type" align="center" label="级别">
            <template slot-scope="scope">
              <div v-if="oemFlag == 1">服务商</div>
              <div v-else>{{scope.row.typeName}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="agentname" align="center" label="服务商名称">
            <template slot-scope="scope">
              <div>{{ scope.row.agentname}}<span class="oem" v-if="scope.row.isOem == 1">OEM</span></div>
            </template>
          </el-table-column>
          <el-table-column prop="agentcode" align="center" label="编号"></el-table-column>
          <el-table-column prop="contacts" align="center" label="联系人"></el-table-column>
          <el-table-column prop="phone" align="center" label="手机号"></el-table-column>
          <el-table-column prop="createtime" align="center" label="创建时间"></el-table-column>
          <el-table-column prop="subAgentNum" align="center" label="下级服务商(个)" v-if="serviceinfo.state == 1"></el-table-column>
          <el-table-column prop="parentName" align="center" label="上级服务商" ></el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="jupmoem(scope.row)" v-if="scope.row.type == 1">定制</el-button>
              <!-- <el-button type="text" size="small" @click="jupmoemrole(scope.row)" v-if="scope.row.isOem == 1">菜单</el-button> -->
              <el-button type="text" size="small" @click="jupminfo(scope.row)">详情</el-button>
              <!-- <el-button type="text" size="small">修改</el-button> -->
              <el-button type="text" size="small" @click="deleteServiceProviders(scope.row.id)">注销</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :page-sizes="[10,20,30,40,50]"
            :page-size="cur_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total1"
          ></el-pagination>
        </div>
      </div>
      <br>
      <br>

      <!-- 新增服务商 -->
      <el-dialog v-dialogDrag title="新增服务商" :visible.sync="visible" width="30%" :close-on-click-modal='false'>
        <el-form
          :model="addservice"
          status-icon
          ref="addservice"
          label-width="150px"
          class="demo-dynamic"
        >
          <el-form-item :required="true" label="服务商级别："  v-if="rolesId !== 2">
            <el-select class="select-input" v-model="addservice.type" placeholder="请选择">
              <el-option keys="1" label="一级服务商" :value="1" ></el-option>
              <el-option keys="1" label="二级服务商" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :required="true" label="服务商级别：" v-if="rolesId == 2">
            <el-select class="select-input" v-model="addservice.type" placeholder="请选择" :disabled="true" >
              <el-option v-if="oemFlag != 1" keys="1" label="二级服务商" :value="2"></el-option>
              <el-option v-else keys="1" label="服务商" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :required="true" label="上级服务商：" v-show="addservice.type == 2 && rolesId !== 2">
            <el-select class="select-input" v-model="addservice.parentid" placeholder="请选择">
              <el-option v-for="(item,index) in lastservice" :key="index" :label="item.label" :value="item.value" ></el-option>
            </el-select>
            <!-- <el-input type="text" v-model="addservice.phone" autocomplete="off"></el-input> -->
          </el-form-item>
          <el-form-item :required="true" label="服务商名称：">
            <el-input type="text" v-model.trim="addservice.agentname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="联系人：">
            <el-input type="text" v-model.trim="addservice.contacts" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="联系人手机号：">
            <el-input type="text" v-model.trim="addservice.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="联系人邮箱：">
            <el-input type="text" v-model.trim="addservice.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="结算账号：">
            <el-input type="text" v-model.trim="addservice.cardnum" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="结算账号开户名：">
            <el-input type="text" v-model.trim="addservice.cardname" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <!-- @click="visible = false" -->
          <el-button type="primary" @click="addshopfun()">确定</el-button>
        </span>
      </el-dialog>
      
    </div>
  </div>
</template>

<script>
import { agent, deleteServiceProviders, addServiceProviders, getLastService, getlabelTagList, getDimensionTagList, oemsave } from "@/api/api";
export default {
  name: "baseform",
  data: function() {
    return {
      parentName:null,
      subAgentNum:0,
      loading: true,
      isDisable: false,
      total1:0,
      cur_page: 1,
      cur_size: 10,
      visible: false,
      Channeldeploy:false,
      merchantarr:[],
      pageCount:"",
      fid:"",
      rolesId:"",
      addservice:{
        type:'',
        parentid:'',
        agentname:'',
        contacts:'',
        phone:'',
        email:'',
        cardnum:'',
        cardname:''
      },
      lastservice:[
        {value:'',label:''}
      ],
      serviceinfo:{
        stardate:"",
        enddate:"",
        head:"",
        phone:"",
        agent:"",
        state:""
      },
      dimension:'',//选择维度
      tagname:'',//标签名
      label_all:[],//标签模糊查询
      tagId:'',
      oemFlag:''
    };
  },
  
  created() {
    this.agent()
    this.getPermissions()
    this.oemFlag = sessionStorage.getItem('oemFlag')
  },
  mounted() {
  
  },
  methods: {
     //修改thead 背景色
     tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;'
      }
    },
    onSubmit() {
      this.$message.success("提交成功！");
    },
   
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.agent()
      //  this.$nextTick(() => {
      //    document.querySelectorAll('.content')[0].scrollTop = '0'
      // });
    },
     // 分页数量
    sizechange(val){
      this.cur_size = val
      this.agent()
       
      //  this.$nextTick(() => {
      //    document.querySelectorAll('.content')[0].scrollTop = '0'
      // });
       
    },
    // 门店列表
    agent(){
       this.isDisable = true
      //  console.log(this.serviceinfo.state)
       agent({
          page: this.cur_page,
          size: this.cur_size,
          startTime: this.serviceinfo.stardate,
          endTime: this.serviceinfo.enddate,
          keywords: this.serviceinfo.agent,
          contacts: this.serviceinfo.head,
          phone: this.serviceinfo.phone,
          type: this.serviceinfo.state,
          tagId: this.tagId
        }).then(res => {
          // console.log(res);
          if(res.code == 405){
            sessionStorage. removeItem('token')
            this.$router.push('/login');
          }else{
            this.isDisable = false
            this.loading = false
            this.merchantarr = res.data
            this.pageCount = res.pageInfo.pageCount
            this.total1 = res.pageInfo.recordCount
            this.parentName = res.data.parentName
            this.subAgentNum = res.data.subAgentNum
          }
        });
    },
    // 搜索
    soso(){
      this.cur_page = 1
      
      this.agent()
    },
    // 重置
    reset(){
      this.serviceinfo.head = ''
      this.serviceinfo.phone = ''
      this.serviceinfo.stardate = ''
      this.serviceinfo.enddate = ''
      this.serviceinfo.state = ''
      this.serviceinfo.agent = ''
      this.dimension = ''
      this.tagname = ''
      this.tagId = ''
    },
    // 刷新
    refresh (){
      // location.reload()
      // this.$router.replace({
      //   path: '/refresh',
      //   query: {
      //     t: Date.now()
      //   }
      // })
      this.loading = true
      this.agent()
    },
    //获取权限
    getPermissions(){
      var aaa = sessionStorage.getItem('userInfo')
      var bbb = JSON.parse(aaa)
      this.rolesId = bbb.rolesId
      this.fid = bbb.fid
      // console.log(this.rolesId)
    },
    // 新增服务商
    addservices(){
      if(this.rolesId == 2){
        this.addservice.type = 2
      }
      this.visible = true
      this.addservice.parentid = ''
      this.addservice.agentname = ''
      this.addservice.contacts = ''
      this.addservice.phone = ''
      this.addservice.email = ''
      this.addservice.cardnum = ''
      this.addservice.cardname = ''
      getLastService({
        type:1
      }).then(res => {
        if(res.code == 405){
          sessionStorage. removeItem('token')
          this.$router.push('/login');
        }else if(res.code == 200){
          this.lastservice = []
          for(var i = 0; i < res.data.rows.length; i++){
            this.lastservice.push({value:res.data.rows[i].id,label:res.data.rows[i].agentname})
          }
          // console.log(this.lastservice)
        }
      })
    },
    //新增服务商 保存
    addshopfun(){
      if(this.rolesId == 2){
        this.addservice.parentid = this.fid
      }
      addServiceProviders({
        type: this.addservice.type,
        parentid: this.addservice.parentid,
        agentname: this.addservice.agentname,
        contacts: this.addservice.contacts,
        phone: this.addservice.phone,
        email: this.addservice.email,
        cardnum: this.addservice.cardnum,
        cardname: this.addservice.cardname
      }).then(res => {
        if(res.code == 405){
          sessionStorage. removeItem('token')
          this.$router.push('/login');
        }else if(res.code == 200){
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.visible = false
          this.addservice.type = ''
          this.addservice.parentid = ''
          this.addservice.agentname = ''
          this.addservice.contacts = ''
          this.addservice.phone = ''
          this.addservice.email = ''
          this.addservice.cardnum = ''
          this.addservice.cardname = ''
          this.agent()
        }else{
          this.$message.error(res.message);
        }
      })
    },
    //删除服务商
    deleteServiceProviders(v){
      this.$confirm(`是否确定注销该账号？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
      }).then(() => {
          deleteServiceProviders({},v).then(res => {
            if(res.code == 405){
                sessionStorage. removeItem('token')
                this.$router.push('/login');
              }else if(res.code == 200){
                this.$message({
                  message: '注销成功',
                  type: 'success'
                });
                this.agent()
              }else{
                this.$message.error(res.message);
              }
          })
      })
      .catch(() => {
          this.$message({
              type: "info",
              message: "已取消"
          });
      });
    },
    // 详情
    jupminfo(val){
      this.$router.push({
          path: "/serviceprovidersinfo",
      //     // query: { 
      //     //   no: val.id,
      //     //   v: val.type
      //     // } 
      });
      sessionStorage.setItem('serviceproviders_id',JSON.stringify(val.id))
      sessionStorage.setItem('serviceproviders_type',JSON.stringify(val.type))
      sessionStorage.setItem('serviceproviders_agentname',JSON.stringify(val.agentname))
    },
    jupmoem(val){
       this.$router.push({
          path: "/oemset",
      //     // query: { 
      //     //   no: val.id,
      //     //   v: val.type
      //     // } 
      });
      sessionStorage.setItem('oemId',JSON.stringify(val))
    },
    // 跳oem配置菜单
    jupmoemrole(val){
        this.$router.push({
          path: "/oemrole",
      //     // query: { 
      //     //   no: val.id,
      //     //   v: val.type
      //     // } 
      });
      sessionStorage.setItem('oemId',JSON.stringify(val))
    },
    //维度查询标签
    dimension_menu(v){
      this.label_all = []
      getDimensionTagList({
        roleId: v
      }).then(res => {
        if(res.code == 405){
          sessionStorage. removeItem('token')
          this.$router.push('/login');
        }else if(res.code == 200){
          for(var i=0;i<res.data.length;i++){
            this.label_all.push({'value':res.data[i].tagName,'id':res.data[i].tagId})
          }
        }else{
          this.$message.error(res.message);
        }
      })
    },
    //标签模糊
    querySearch_tag(queryString,cb){
      let roleId = ''
      if(this.serviceinfo.state == 1){
        roleId = 2
      }else if(this.serviceinfo.state == 2){
        roleId = 3
      }else if(this.rolesId == 2){
        roleId = 3
      }
      let that = this
      getDimensionTagList({
        roleId: roleId,
        tagwords: this.tagname
      }).then(res => {
        if(res.code == 405){
          sessionStorage. removeItem('token')
          that.$router.push('/login');
        }else if(res.code == 200){
          that.label_all = []
          for(var i=0;i<res.data.length;i++){
            that.label_all.push({'value':res.data[i].tagName,'id':res.data[i].tagId})
          }
          let servicearr = that.label_all;
          let results = queryString
            ? servicearr.filter(that.createFilter(queryString))
            : servicearr;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }else{
          that.$message.error(res.message);
        }
      })
    },
    serviceid_tag(item){
      // console.log(item)
      this.tagId = item.id
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !==
          -1
        );
      };
    },
  }
};
</script>
<style scoped lang="less">
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 30%;
}
.merchants1{
  width: 50%;
}
.statistical {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #374459;
  color: #fff;
  padding: 12px;
  box-sizing: border-box;
}
.statistical > .statisticalitem {
  width: 50%;
  text-align: center;
  line-height: 200%;
}
.tableBox {
  margin-top: 20px;
}
.block{
  width: 60%;
}
.red {
  color: #f9607d;
}

.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
.select-input{
  width: 100%;
}
.oem{
  border: 1px solid #F3BB47;
  color: #F3BB47;
  margin-left: 5px;
  border-radius: 5px;
  font-size: 8px;
  padding: 0px 2px;
}
</style>